<template>
  <div>
    <head-nav :isBack="isBack"></head-nav>
    <!-- 占位 -->
    <div class="zanwei-top"></div>
    <div class="rap_goodslist">
      <ul
        v-infinite-scroll="loadMore"
        infinite-scroll-disabled="loading"
        infinite-scroll-distance="10"
      >
        <li v-for="(item,index) in rows" :key="index">
          <!-- <router-link class="rap_rout" :to="{path:'/faddishdetail'}" tag="div"> -->
          <div class="rap_rout" @click="goDetailFn(item.ID)">
            <div class="list_l">
              <div class="rap_ph">
                <img :src="item.TP[0]" />
              </div>
              <div class="rap_cont">
                <div class="tit">{{item.SPMC}}</div>
                <div class="price">
                  <span :style="textColor">¥{{item.XJ}}</span>
                  <span v-if="item.JE && item.XJ!=item.JE && item.JE!=null">原价:¥{{item.JE}}</span>
                </div>
                <span :style="textColor">(库存{{item.KC}})</span>
                <!-- <div class="ms" v-html="item.MSTEXT"></div> -->
                <!--<p class="ms2" v-if="item.XGCS > 0">数量限制{{item.XGCS}}，{{item.XJ}}元抢购</p>
                <p class="ms2" v-else>{{item.XJ}}元抢购</p>-->
              </div>
            </div>
            <div class="rap_xqbtn" :style="backgroundColor">立即抢购</div>
            <!-- </router-link> -->
          </div>
        </li>
      </ul>
    </div>
    <div class="list-loading" v-if="loading">
      <i class="iconfont icon-loading"></i> 加载中...
    </div>
    <div v-else>
      <div v-if="forbid" class="forbid">没有更多了...</div>
    </div>
    <!--底部占位-->
    <div class="zanwei-bottom"></div>
  </div>
</template>

<script>
import api from "@/api/api";
import { Toast, MessageBox } from "mint-ui";

export default {
  data() {
    return {
      isBack: false,
      loading: true,
      num: 1,
      numSize: 8,
      rows: [],
      forbid: false,
      jfhlfl: "8a818949640307680164030768990001",
      sort: "YSSL",
      orderby: "DESC"
    };
  },
  methods: {
    loadMore() {
      this.num++;
      if (this.forbid) {
        return false;
      }
      this.loading = true;

      this.getListDataFn(
        this.jfhlfl,
        this.numSize,
        this.num,
        this.sort,
        this.orderby
      );
      console.log(this.num);
      // this.loading = false;
    },
    getListDataFn(jfhlfl, row, num, sort, orderby) {
      let page = this;
      api.scoreToGift(page, jfhlfl, row, num, cb /*sort, orderby*/);

      function cb(res) {
        if (res.code == 0) {
          let data = JSON.parse(res.data);
          console.log(data);
          console.log(data.rows);
          if (data.rows.length !== 0) {
            let rows = data.rows.map(y => {
              let TP = y.TP.map(x => {
                return page.host.filehost + x;
              });
              y.TP = TP;
              return y;
            });
            page.rows = page.rows.concat(rows);
          } else {
            page.forbid = true;
          }
        } else {
          Toast({
            message: res.msg,
            duration: 3000
          });
        }
        setTimeout(function() {
          page.loading = false;
        }, 1000);
      }
    },
    goDetailFn(id) {
      let page = this;
      var userinfo = JSON.parse(sessionStorage.getItem("userinfo"));
      if (userinfo.vipcode!=undefined && userinfo.vipcode!=null && userinfo.vipcode!='') {
      	
      } else {
      		Toast({
      				message: '您还不是会员，快去注册吧！',
      				duration: 2000
      		});
      		setTimeout(function () {
      				page.$router.push('/register')
          }, 2000)
          return;
      }
      // 检查过期
      if (userinfo && userinfo.vipcode) {
        let userId = userinfo.vipcode;
        if (!this.$util.checkValidity()) return;
        api.scoreToGiftDetail(page, userId, id, cb);
        function cb(res) {
          if (res.code !== 0) {
            Toast({
              message: res.msg,
              duration: 3000
            });
            // setTimeout(function () {
            //   page.rows = [];
            //   page.getListDataFn(page.jfhlfl, page.numSize, page.num, page.sort, page.orderby);
            // },1000);
          } else {
            page.$router.push("/faddishdetail/" + id);
          }
        }
      } else {
        page.$router.push("/faddishdetail/" + id);
      }
    }
  },
  mounted() {
    let page = this;
    page.getListDataFn(
      page.jfhlfl,
      page.numSize,
      page.num,
      page.sort,
      page.orderby
    );
    api.getUserInfo(this, res => {});
  }
};
</script>

<style lang="less">
.forbid {
  padding: 0.2rem;
  text-align: center;
}
.rap_goodslist {
  ul {
    li {
      padding: 0.2rem 0 0.1rem 0;
      border-bottom: 0.01rem solid #e2e2e2;
      .rap_rout {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .list_l {
        display: flex;
      }
      .rap_ph {
        border-radius: 0.06rem;
        margin: 0 0.15rem 0 0.1rem;
        img {
          width: 1.48rem;
          height: 1.48rem;
          border-radius: 0.06rem;
        }
      }
      .rap_cont {
        width: 4.1rem;
        div {
          color: #333;
        }
        span {
          font-size: 0.28rem;
          color: #f05dc4;
          line-height: 0.36rem;
          margin-top: 0.12rem;
          display: block;
        }
        p {
          font-size: 0.28rem;
          color: #bdbdbd;
          line-height: 0.36rem;
        }
        .tit {
          font-size: 0.3rem;
          font-weight: bold;
          line-height: 0.46rem;
        }
        .ms {
          font-size: 0.28rem;
          line-height: 0.36rem;
          margin-top: 0.12rem;
          width: 4.1rem;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          & > * {
            padding: 0 !important;
            margin: 0 !important;
            font-size: 0.28rem !important;
            color: #bdbdbd !important;
            line-height: 0.36rem !important;
          }
        }
        .ms2 {
          margin-top: 0.12rem;
        }
        .price {
          display: flex;
          justify-content: space-between;
          span {
            &:nth-child(2) {
              text-decoration: line-through;
              color: #999999;
              margin-right: 0.4rem;
            }
          }
        }
      }
      .rap_xqbtn {
        width: 1.42rem;
        height: 0.4rem;
        color: #fff;
        font-size: 0.24rem;
        text-align: center;
        line-height: 0.4rem;
        background-color: #f05dc4;
        border-radius: 0.1rem;
        margin-right: 0.2rem;
      }
    }
  }
}
</style>
